<template>
  <div class="route-header">
    <div class="header-left">
      <div class="title-section">
        <i class="el-icon-location-outline"></i>
        <span class="title">货物追踪路线</span>
      </div>
      <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>货物追踪</el-breadcrumb-item>
          <el-breadcrumb-item>查看路线</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    
    <div class="header-right">
      <div class="action-buttons">
        <el-button 
          type="primary" 
          size="default"
          @click="$emit('refresh')"
          :loading="loading"
          icon="Refresh"
        >
          刷新数据
        </el-button>
        <!-- 测试设备功能已禁用 
        <el-button 
          type="success" 
          size="default"
          @click="$emit('test-device')"
          icon="Connection"
        >
          测试设备
        </el-button>
        -->
        <el-button 
          size="default"
          @click="$emit('go-back')"
          icon="Back"
        >
          返回
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
defineEmits(['refresh', 'test-device', 'go-back'])
defineProps({
  loading: {
    type: Boolean,
    default: false
  }
})
</script>

<style lang="scss" scoped>
.route-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
  
  .header-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
    
    .title-section {
      display: flex;
      align-items: center;
      gap: 12px;
      
      i {
        font-size: 24px;
        color: #409eff;
      }
      
      .title {
        font-size: 20px;
        font-weight: 600;
        color: #303133;
        margin: 0;
      }
    }
    
    .breadcrumb {
      :deep(.el-breadcrumb) {
        font-size: 13px;
        
        .el-breadcrumb__item {
          .el-breadcrumb__inner {
            color: #909399;
            font-weight: normal;
          }
          
          &:last-child .el-breadcrumb__inner {
            color: #606266;
            font-weight: 500;
          }
        }
      }
    }
  }
  
  .header-right {
    .action-buttons {
      display: flex;
      gap: 12px;
      
      :deep(.el-button) {
        height: 36px;
        padding: 0 16px;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        &.is-loading {
          transform: none;
        }
      }
    }
  }
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .route-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    
    .header-right {
      width: 100%;
      
      .action-buttons {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
        
        :deep(.el-button) {
          height: 32px;
          padding: 0 12px;
          font-size: 13px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .route-header {
    .header-left {
      .title-section {
        .title {
          font-size: 18px;
        }
        
        i {
          font-size: 20px;
        }
      }
    }
    
    .header-right {
      .action-buttons {
        width: 100%;
        justify-content: space-between;
        
        :deep(.el-button) {
          flex: 1;
          min-width: 0;
        }
      }
    }
  }
}
</style>